<template>
 <div>
     <div class="container">
         <h3>提交评论</h3>
        <textarea placeholder="请输入评论内容..." v-model="dataTa"></textarea>
        <mt-button class="commit" type="primary" size="large" @click='postComment'>提交评论</mt-button>
        <div>
            <h3>评论列表</h3>
            <div v-for="(item,index) in commentData">
                <div class="title">
				<span>{{index+1}}楼</span>
                <span>匿名用户</span>
                <span>{{item.add_time | datefmt('YYYY-MM-DD HH:mm:ss')}}</span>
                </div>
                <ul class="mui-table-view">
                    <li class="mui-table-view-cell">{{item.content}}</li>
                </ul>
            </div>
        </div>
     </div>
 </div>
</template>

<script>
import { Toast } from 'mint-ui';
 export default {
    props:['id'],
   data () {
     return {
         dataTa:'',//文本框中的内容
         commentData:''
     }
   },
   created(){
       this.getCommentList(1);
   },
   methods:{
       getCommentList(pageIndex){
           pageIndex=pageIndex|1;
           var url="api/getcomments/"+this.id+"?pageindex="+pageIndex;
           this.$http.get(url).then(function(res){
            //    console.log(res.body.message);
               if(res.body.status!=0){
                   Toast(res.body.status);
                   return;
               }
               this.commentData=res.body.message;
               
           })
       },
       postComment(){
           if(this.dataTa.trim().length<=0){//判断文本框是否有值
               Toast('评论内容不能为空！');
               return;
           }
           var url="api/postcomment/"+this.id;
           this.$http.post(url,{content:this.dataTa},{emulateJSON:true}).then(function(res){
               Toast(res.body.message);
                this.getCommentList(1);
               this.dataTa='';//清空文本框
           });
       }
   }
 }
</script>

<style>
    .container{
        padding:5px;
    }
    .container h3{
        width:100%;
        border-bottom:1px solid #ccc;
        padding-bottom:15px;
    }
    .commit {
        margin-bottom:20px;
    }
    .title {
        background-color: #6d6d72;
        padding:5px;
        color:#ccc;
    }
 
</style>
